<template>
  <div ref="dataMap" style="width: 100%; height: 100%" />
</template>
<script>
import "./china";
export default {
  name: "DataMap",
  props: {
    echartsMapData: {
      type: Object,
      required: true,
    },
    // 图表标题
    title: {
      type: String,
      required: true,
      default: "",
    },
    // 图表副标题
    subTitle: {
      type: String,
      required: false,
      default: "",
    },
    // 是否显示图例
    legendIsShow: {
      type: Boolean,
      required: false,
      default: true,
    },
  },
  data() {
    return {
      config: {},
    };
  },
  methods: {
    createChart() {
      // 循环数据，取出图例legend下的data数据
      let _legendData = new Array();
      this.echartsMapData.series.forEach((item) => {
        _legendData.push(item.name);
      });
      // console.log(_legendData)
      // 循环数据，取出series下的data数据
      let _series = [];
      this.echartsMapData.series.forEach((item, index) => {
        _series.push({
          name: item.name,
          type: "map",
          mapType: "china",
          roam: false,
          itemStyle: {
            normal: { label: { show: true } },
            emphasis: { label: { show: true } },
          },
          data: item.data,
        });
      });

      let chart = this.$echarts.init(this.$refs.dataMap, "dark");
      let option = {
        title: {
          text: this.title,
          subtext: this.subTitle,
          x: "center",
          textStyle: { color: "#cef7f0" },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: this.legendIsShow,
          orient: "vertical",
          x: "left",
          data: _legendData,
          textStyle: { color: "#cef7f0" },
        },
        dataRange: {
          min: 0,
          max: 2500,
          x: "left",
          y: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          textStyle: { color: "#cef7f0" },
        },
        toolbox: {
          show: true,
          orient: "vertical",
          x: "right",
          y: "center",
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        roamController: {
          show: true,
          x: "right",
          mapTypeControl: {
            china: true,
          },
        },
        backgroundColor: "transparent",
        series: _series,
      };
      chart.setOption(option);
    },
  },
  watch: {
    echartsMapData: {
      handler(newValue, oldValue) {
        if (oldValue != newValue) {
          this.createChart();
        }
      },
      deep: true,
    },
  },
};
</script>
